<template>
  <div>
     <div id="notic">
        <div  class="conLeft">
           <el-form ref="form" label-width="80px" style="height:500px">
            <el-form-item label="标题">
                <el-input style="width:500px;" v-model="content.title"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                 <quill-editor id="editorSty" v-model="content.content" ref="myTextEditor"  :options="editorOption">
                 </quill-editor>
            </el-form-item>
           </el-form>
           <el-button type="warning" @click="newData" class="btnSave" round>新建公告</el-button>
           <el-button type="success" @click="saveData" round>保存公告</el-button>
        </div>
        <div class="conRight">
            <h2 class="hh">历史记录</h2>
            <el-table
                :data="hisList.list"
                max-height="480"
                style="width: 100%">
                <el-table-column
                type="index"
                width="40">
                </el-table-column>
                <el-table-column
                prop="title"
                label="标题"
                show-overflow-tooltip
                width="110">
                </el-table-column>
                <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="check(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="deleteMessage(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
                </el-table-column>
                  <el-table-column  width="110" >
                    <template slot-scope="scope">
                      <el-switch 
                      v-model="scope.row.status"  active-value="1"   inactive-value="0"  @change="switchChange(scope.row)"   
                       active-color="#409EFF" size="mini" inactive-color="#909399">
                      </el-switch>
                    </template>
                </el-table-column>
                
          </el-table>
            <!--分页-->
         <div class="block" style="text-align: right;padding: 10px;">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="hisList.pageNumber"
              :page-size="hisList.pageSize"
              layout="total, prev, pager, next"
              :total="hisList.totalRow">
            </el-pagination>
          </div>
        </div>
  </div>
     
  </div>
</template>

<script>
  // require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
  export default {
    data: function () {
      return {
        hisList:{},
        editorOption: {},
        content: {
          title: undefined,
          content: undefined,
          status: undefined,
          id:undefined,
        },
        contentTitle:'',
        allTitle:'',
        forms:{
          pageSize: 7,
          pageNumber: 1,
          lottertyId: undefined
        }
      }
    },
    created () {
        this.getAllData()
    },
    computed: {
       
    },
    components: { quillEditor },
    methods: {
      // 添加公告
      newData(){
        console.log('**********')
        console.log(this.content.id)
         if(this.content.id){
            delete this.content.id;
         }
          this.content.status = 0;
          this.$api.saveNotice(this.content).then(res => {
          if (res.code === '000000') {
            this.$message.success('保存成功！');
            this.getAllData()
            this.content.title=undefined;
            this.content.content=undefined;
          }
        })
      },
      // 添加保存公告
      saveData () {
         if(this.content.id){
            this.$api.saveNotice(this.content) .then(res => {
          if (res.code === '000000') {
            this.$message.success('保存成功！');
            this.getAllData()
            this.content.title=undefined;
            this.content.content=undefined;
            delete this.content.id;
          }
        })
         }
      },
      // 删除历史公告
       deleteMessage(id){
        this.$confirm('您确定要删除该商户吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deletehisNotice(id).then(res => {
            if (res.code === '000000') {
              this.$message.success('删除成功')
              this.getAllData()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取历史记录
       getAllData(){
              this.$api.getAlldata(this.forms).then(res=>{
                if(res.code=='000000'){
                  console.log('res.data')
                    this.allTitle = res.data;
                    console.log(this.allTitle)
                    this.hisList = res.data;
                    this.hisList.list.forEach((item)=>{
                      item.status=item.status+''
                        // if(item.title.length>5){
                        //   item.title = item.title.substr(0,6)+'...'
                        // }else{
                        //   return;
                        // }
                    })
                }
             })
         },
       check(value){
         console.log(this.allTitle)
         this.content = value;
        //  this.allTitle.list.forEach((item)=>{
        //      if(item.)
        //  })
        //  this.contentTitle = this.content.title.substr(0,6)
        //  console.log('this.contentTitle')
        //  console.log(this.contentTitle)
        //  this.allTitle.list.forEach((item)=>{
        //    var midd = item.title.substr(0,6);
        //    console.log('midd')
        //    console.log(midd)
        //    if(this.contentTitle==midd){
        //        this.content.title = item.title
        //        console.log('item.title')
        //        console.log(item.title)
        //    }
        //  })
         
       },
      // 分页
       handleCurrentChange (val) {
        this.forms.pageNumber = val
        this.getAllData()
      },
      switchChange(val){
        console.log(val)
        this.$api.saveNotice(val).then(res => {
            if (res.code === '000000') {
          } 
        })
      },
    }
  }
</script>
<style>
#notic .el-form-item__content {
    width: 180px!important;
    margin-left: 130px!important;
}
#notic .ql-toolbar.ql-snow + .ql-container.ql-snow {
    width: 600px!important;
}
#notic .ql-editor{
  width:600px!important;
}
#notic .ql-toolbar.ql-snow {
    width: 600px!important;
    }
#notic .ql-toolbar{
  width:700px!important;
}
#notic #editorSty{
    height:300px;
}

#notic .el-table_1_column_1{
    height:20px!important;
}

#notic .hh{
    margin:0 0 10px 0;
}
#notic .ql-editor{
    height:300px;
}
  #notic{
      margin:15px 15px 15px 0;
      width:1100px;
      display:flex;
  }
  #notic .el-form{
    width:580px;
  }
  #notic .conLeft{
      width:700px;
  }
  #notic .conRight{
      width:450px;
      margin-left:190px;
      border:1px soild gray;
  }
  #notic .btnSave{
      margin-left:130px;
      margin-top:15px;
  }
  #notic .editor-btn {
    margin-top: 20px;
  }
  #notic .ql-toolbar.ql-snow{
    text-align: left;
  }
  #notic .ql-editor{
    height:300px;
  }
</style>
